<template>
  <view
    class="navbar-default"
    :style="{backgroundColor: '#fff', height: height + 'px'}"
  >
    <view class="navbar-com"  :style="{height: boundRect?.top + boundRect?.height + 'px'}" > </view>
    <view class="opra-nav" >
      <view class="calendar" @click="chooseCalendar" >
        <view>{{calendarValue}}</view>
        <image class="calendar-icon" src="/static/common/calendar-icon.png" />
      </view>
      <view class="title" v-if="title" >{{title}}</view> 

      <view class="title" @click="openRizhuCard" v-else >
        <view>{{currentRizhu}}</view>
        <nut-icon name="triangle-down"></nut-icon>
      </view> 
      <view class="day" >
        <view class="day-i" >同癸丑日</view>
        <nut-switch v-model="isDay" @change="changeDay" active-color="rgb(234, 172, 69)" />
      </view>
    </view>
   
    <view class="rizhu-card" v-if="visible" >
      <view class="rizhu-title" >日主天干</view>
      <view class="rizhu-list" >
        <view 
          class="rizhu-card-item" 
          v-for="item in CommonController.rizhuList" 
          :key="item.color" 
          :style="{color: item.color}"
          @click="changeRizhu(item.title)"
        >
          {{item.title}}
        </view>
      </view>
     </view>
    <nut-calendar
      v-model:visible="show"
      showToday
      :default-value="date"
      :show-month="true"
      start-date="2025-01-11"
      is-auto-back-fill
      @close="show = false"
      @choose="choose"
    >
    </nut-calendar>

  
  </view>
  <nut-overlay v-model:visible="visible" :z-index="2000"></nut-overlay>
  </template>
  <script lang='ts' setup >
  import { CommonController } from '@/controller';
import { useSettingStore } from '@/store';
import { onShow } from '@dcloudio/uni-app';
import dayjs from 'dayjs';
import { defineProps, onMounted, ref, watch } from 'vue';
  
  // 往下滚动300px 背景色变为纯白
  export interface IProps {
    title?: string
  }

  const useSetting = useSettingStore()
  
  const props = defineProps<IProps>()

  const height = ref(0)
  
  const calendarValue = ref('2024.12.2')

  const emits = defineEmits(['changeDate', 'changeDay', 'changeRizhu'])

  const changeRizhu = (title: string) => {
    emits('changeRizhu', {rizhu: title})
    visible.value = false
  }

  const show = ref(false)

  const isDay = ref(true)

  const date = ref('')

  const boundRect = ref()

  const visible = ref(false)

  const currentRizhu = ref('日主')

  watch(
    () => show.value,
    () => {
      if (show.value) {
        date.value = dayjs().format('YYYY-MM-DD')
      }
    }
  )

  const choose = (date: string) => {
    console.log(date)
    show.value = true
    calendarValue.value = dayjs(date[3]).format('YYYY.MM.DD')
    emits('changeDate', {date: date[3]})
  }

  const chooseCalendar = () => {
    show.value = true
  }

  const changeDay = (_isDay: boolean) => {
    isDay.value = _isDay
    useSetting.setDay(_isDay)
    emits('changeDay', {isDay: _isDay})
  }

  const getCurrentDay = () => {
    // if (deviceInfo.platform === 'android') {
    //   date.value = dayjs().format('YYYY-MM-DD')
    // } else {
    //   date.value = dayjs().format('YYYY-MM-DD')
    // }
    // console.log('date:', date.value);
    
    calendarValue.value = dayjs().format('YYYY.MM.DD')
  }

  const openRizhuCard = () => {
    visible.value = true
  }

  onShow(() => {
    console.log('onShow:', useSetting.isDay)
    getCurrentDay()
    isDay.value = useSetting.isDay
  })

  onMounted(() => {
    console.log('onMounted')
    const res = uni.getMenuButtonBoundingClientRect()
    boundRect.value = res
    height.value = res.bottom + 45
  })
  
  </script>
  <style lang='less' scoped >
  
  .navbar-default {
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2001;
    background: #fafbfc;
    box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
    .navbar-com {
      width: 100vw;
      position: relative;
      .back-icon {
        width: 68rpx;
        height: 68rpx;
        position: absolute;
        left: 24rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: -6rpx;
        .icon-bg {
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.3);
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 50%;
          position: absolute;
          top: 0;
          left: 0;
        }
        // .icon {
        //   position: absolute;
        //   top: 50%;
        //   left: 50%;
        //   transform: translate(-50%, -50%);
        // }
      }
      .title {
        width: 120rpx;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 36rpx;
        font-weight: 600;
        color: #333;
        letter-spacing: 1rpx;
        text-shadow: none;
      }
    }
    .opra-nav {
      margin-top: 12rpx;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 48rpx;
      box-sizing: border-box;
      .calendar {
        width: 210rpx;
        height: 44rpx;
        border: 2rpx solid #e5e6eb;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10rpx;
        background: #fff;
        transition: box-shadow 0.2s;
        box-shadow: 0 1rpx 4rpx rgba(0,0,0,0.03);
        &:active {
          box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
        }
        .calendar-icon {
          width: 28rpx;
          height: 28rpx;
          display: block;
          margin-left: 8rpx;
        }
      }
      .title {
        font-weight: 600;
        font-size: 34rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #333;
      }
      .day {
        display: flex;
        align-items: center;
        .day-i {
          margin-right: 8rpx;
          color: #888;
          font-weight: 500;
        }
      }
    }
    .rizhu-card {
        width: 100vw;
        height: 244rpx;
        border-radius: 12rpx;
        background: #fff;
        box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
        padding: 48rpx;
        box-sizing: border-box;
        .rizhu-title {
          width: 100%;
          height: 48rpx;
          color: #bbb;
          margin-bottom: 12rpx;
          font-size: 26rpx;
          font-weight: 500;
        }
        .rizhu-list {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          justify-content: center;
          .rizhu-card-item {
            width: 120rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #f7f8fa;
            border-radius: 8rpx;
            box-shadow: 0 1rpx 4rpx rgba(0,0,0,0.03);
            font-weight: 500;
            font-size: 28rpx;
            color: #666;
            margin-right: 6rpx;
            margin-bottom: 6rpx;
            transition: box-shadow 0.2s, background 0.2s;
            &:active {
              background: #ececec;
              box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
            }
          }
        }
      }
  }
  </style>